<script setup lang="ts">
const emits = defineEmits<{
    (e: "zoomin"): void;
    (e: "zoomout"): void;
    (e: "locate"): void;
    (e: "traffic"): void;
}>();
</script>

<template>
    <div class="toolbox">
        <img
            src="../../../assets/btn_traffic_light.png"
            @click="emits('traffic')"
        />
        <img src="../../../assets/btn_zoom_out.png" @click="emits('zoomin')" />
        <img src="../../../assets/btn_zoom_in.png" @click="emits('zoomout')" />
        <!-- <img src="../../../assets/btn_locate.png" @click="emits('locate')" /> -->
    </div>
</template>

<style lang="scss" scoped>
.toolbox {
    display: inline-flex;
    flex-direction: column;
    img {
        width: 48px;
        height: 40px;
        cursor: pointer;
        &:nth-child(3) {
            height: 38px;
        }
    }
}
</style>
